<template>
  <div class="dashboard-container">
    <!-- 欢迎信息 -->
    <el-card class="welcome-card">
      <div class="welcome-content">
        <div class="avatar-container">
          <img :src="avatar" alt="用户头像" class="user-avatar" />
        </div>
        <div class="welcome-text">
          <h2>欢迎回来，{{ userName }}</h2>
          <p>{{ getCurrentTime() }}</p>
        </div>
      </div>
    </el-card>

    <!-- 快捷功能面板 -->
    <el-card class="quick-action-card">
      <div slot="header" class="card-header">
        <span>快捷功能</span>
      </div>
      <div class="quick-actions">
        <div class="action-grid">
          <div class="action-item" v-for="(action, index) in filteredActions" :key="index" @click="navigateTo(action.path)">
            <div class="action-icon" :style="{ backgroundColor: action.color }">
              <i :class="action.icon"></i>
            </div>
            <div class="action-name">{{ action.name }}</div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
const DEFAULT_AVATAR = 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png';
export default {
  name: 'AdminHome',
  data() {
    return {
      userName: '管理员',
      avatar: DEFAULT_AVATAR,
      roletype: '1',
      quickActions: [
        { name: '用户管理', path: '/user/userlist', icon: 'el-icon-user', color: '#409EFF', roles: ['1'] },
        { name: '角色管理', path: '/user/rolelist', icon: 'el-icon-s-custom', color: '#67C23A', roles: ['1'] },
        { name: '演出管理', path: '/performances/showlist', icon: 'el-icon-video-camera', color: '#E6A23C', roles: ['1'] },
        { name: '节目管理', path: '/performances/programlist', icon: 'el-icon-tickets', color: '#F56C6C', roles: ['1'] },
        { name: '节目分类', path: '/performances/programcategory', icon: 'el-icon-menu', color: '#909399', roles: ['1'] },
        { name: '艺术家管理', path: '/artists/artist/list', icon: 'el-icon-star-on', color: '#9254DE', roles: ['1'] },
        { name: '流派管理', path: '/artists/school/list', icon: 'el-icon-s-flag', color: '#13C2C2', roles: ['1'] },
        { name: '行当管理', path: '/artists/category/list', icon: 'el-icon-collection', color: '#FADB14', roles: ['1'] },
        { name: '剧目管理', path: '/drama/list', icon: 'el-icon-film', color: '#722ED1', roles: ['1','3'] },
        { name: '文章管理', path: '/content/articles', icon: 'el-icon-document', color: '#2F54EB', roles: ['1','3'] },
        // { name: '分类管理', path: '/content/categories', icon: 'el-icon-folder', color: '#FA541C', roles: ['1'] },
        { name: '论坛专题', path: '/forum/topics', icon: 'el-icon-chat-dot-round', color: '#FAAD14', roles: ['1','3'] },
        { name: '论坛帖子', path: '/forum/posts', icon: 'el-icon-message', color: '#36CBCB', roles: ['1'] },
        { name: '论坛评论', path: '/forum/comments', icon: 'el-icon-chat-line-round', color: '#B37FEB', roles: ['1'] },
        { name: '公告管理', path: '/announcementlist', icon: 'el-icon-notebook-2', color: '#F5222D', roles: ['1'] },
        { name: '留言管理', path: '/guestbook', icon: 'el-icon-edit-outline', color: '#52C41A', roles: ['1'] }
      ]
    };
  },
  computed: {
    filteredActions() {
      // 只显示当前角色允许的快捷功能
      return this.quickActions.filter(action => action.roles.includes(this.roletype));
    }
  },
  mounted() {
    this.userName = localStorage.getItem('screenName') || '管理员';
    this.avatar = localStorage.getItem('avatar') || DEFAULT_AVATAR;
    this.roletype = localStorage.getItem('roletype') || '1';
  },
  methods: {
    getCurrentTime() {
      const now = new Date();
      const year = now.getFullYear();
      const month = now.getMonth() + 1;
      const date = now.getDate();
      const hours = now.getHours();
      let timeStr = '';
      if (hours < 12) {
        timeStr = '上午好';
      } else if (hours < 18) {
        timeStr = '下午好';
      } else {
        timeStr = '晚上好';
      }
      return `${timeStr}，今天是 ${year}年${month}月${date}日`;
    },
    navigateTo(path) {
      this.$router.push(path);
    }
  }
};
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
}
.welcome-card {
  margin-bottom: 20px;
  background: linear-gradient(to right, #1890ff, #36cbcb);
  color: white;
}
.welcome-content {
  display: flex;
  align-items: center;
}
.avatar-container {
  position: relative;
  width: 80px;
  height: 80px;
  margin-right: 30px;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  flex-shrink: 0;
}
.user-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.welcome-text h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 500;
}
.welcome-text p {
  margin: 8px 0 0 0;
  font-size: 16px;
  opacity: 0.9;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.quick-actions {
  padding: 10px 0;
}
.action-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}
.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  padding: 15px;
  border-radius: 8px;
  transition: all 0.3s;
}
.action-item:hover {
  background-color: #f5f7fa;
}
.action-icon {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.action-icon i {
  font-size: 24px;
  color: white;
}
.action-name {
  font-size: 14px;
}
@media (max-width: 768px) {
  .action-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .welcome-content {
    flex-direction: column;
    align-items: flex-start;
  }
  .avatar-container {
    margin: 0 0 15px 0;
  }
}
</style>
